<template>
	<view class="select-wrapper" v-for="(item,index) in dataList" :key="index" @click="choose(item,index)">
		<view class="select-left">
			<slot :data="item">
        <view class="name">{{item[map]}}</view>
      </slot>
		</view>
		<uni-icons v-if="item.checked" type="checkmarkempty" :size="22" color="#B07EFF"></uni-icons>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default() {
					return []
				}
			},
      map: {
        type:String,
        default: 'name'
      },
      itemHeight: {
        type: String,
        default: 'auto'
      }
		},
		emits: ['choose'],
		data() {
			return {
				
			}
		},
		computed: {
			dataList() {
				if(this.list && this.list != false) {
					return this.list
				} else {
					return []
				}
			},
      selectItemHeight() {
        if(this.itemHeight != 'auto') {
          return this.itemHeight + 'px'
        } else if (!this.itemHeight) {
          return 'auto'
        }
      }
		},
		methods: {
			choose(item,index) {
				for (let s of this.dataList) {
					s.checked = false
				}
				this.dataList[index].checked = true
				this.$emit('choose',item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.select-wrapper{
    padding: 0 12px;
		width: 100%;
    height: v-bind(selectItemHeight);
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #e5e5e5;
		.select-left{
			width: calc(100% - 80rpx);
      .name{
        height: 100rpx;
        line-height: 100rpx;
      	font-size: 16px;
      }
		}
	}
  
</style>